<template>
    <div class="img-list-page">
        <div class="top">
            <div class="left">
                <a class="back-tit" @click="handleBack">
                    <a class="back"></a>
                    <div class="tit-text">{{ info.title }}</div>
                    <i>{{ info.num }} 收藏</i>
                    <span class="f-type ftp_0">单图收藏夹</span>
                </a>
                <div class="desc-row">
                    {{ info.content }}
                </div>
            </div>
            <a class="fav-btn" :class="{ 'active': info.isSubscribe > 0 }"
                @click="handleFollowFolder">{{ info.isSubscribe > 0 ? '已关注' : '关注收藏夹' }}</a>
        </div>
        <div class="sub-row">
            <div class="left">
                <a class="img-box" :href="'/user/'+info.member.id" target="_blank">
                    <img loading="lazy" v-aimgd="{ avatar: info.member.avatar, id: info.member.id, w: 24, name: info.member.userName }"/>
                </a>
                <a class="uname" :href="'/user/'+info.member.id" target="_blank">{{ info.member.userName }}<img loading="lazy" class="u-m-tag" v-for="tag in info.member.tagsList" :src="tag.image" alt=""></a>
                <span class="time">更新于 {{info.updateTimeStr}}</span>
                <span class="follow-num">被 {{info.fans}} 人关注</span>
            </div>
            <div class="right">
                <div class="filter-bx">
                    <div class="seach-bx">
                        <form @submit.prevent="() => { return false; }">
                            <input v-model="params.title" type="text" @keypress.enter="handleSearch" placeholder="搜索"><i
                            v-if="params.title" @click="params.title = ''" class="clear-by-search"></i>
                        </form>
                    </div>
                    <!-- <div class="mk-cus-ddl">
                        <span class="cur">全部</span>
                        <div class="sub-dd-block">
                            <ul class="sub-ddls">
                                <li><a>全部</a></li>
                                <li><a>待审核</a></li>
                                <li><a>已通过</a></li>
                                <li><a>未通过</a></li>
                            </ul>
                        </div>
                    </div> -->
                </div>
                <!-- <DropDown class="mr20" :list="statusList" :showAll="true" :value.sync="params.status" :width="150" placeholder=""/> -->
            </div>
        </div>
        <ul class="mk-rd-datas">
            <WaterfallFlowImgList  :isuser="true" ref="refWaf" id="1" :list="list" :columns="columns" :defaultw="414" :iscancel="loginUid==info.member.id"
                :ismove="loginUid==info.member.id" :isfolderinfo="loginUid==info.member.id" @ineditimg="inEditImg" @cancelfav="onCancelFav" v-if="list.length>0"/>
        </ul>
        
        <Empty text="空空如也~" v-if="list.length==0&&!isloading"/>
        <div class="no-more-text" v-if="!isloading&&list.length>0">没有更多了</div>

        <a-modal v-model="showEditImg" destroyOnClose centered :footer="null" :closable="false" width="742px">
            <EditImg @close="showEditImg = false" :record="currentImg" :ismove="true" @favsucc="onTransferSucc" />
        </a-modal>
    </div>
</template>


<script>
import Empty from '@/components/Empty'
import WaterfallFlowImgList from '@/components/WaterfallFlowImgList'
import EditImg from '@/components/EditImg'
import SparkMD5 from 'spark-md5'
import api from '@/api/api'
import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
export default {
    data() {
        return {
            list:[],
            hasMore:true,
            isDataError:false,
            scrollLoaded:false,
            isloading:true,
            keyword:'',
            loginUid:'',
            inIdx: -1,
            columns:6,
            currentImg: {},
            showEditImg: false,
            info: {
                collectList: [],
                member: { tagsList: [] },
                thumbnailList: []
            },
            params:{
                title:'',
                pageNum:1,
                orderByColumn:'id',
                isAsc:'DESC',
                pageSize:50
            }
        }
    },
    components: {
        Waterfall,
        WaterfallSlot, EditImg, WaterfallFlowImgList,Empty
    },
    methods: {
        handleLoadingMore() {
            this.params.pageNum++;
            this.queryList();
        },
        calculateTilt(corners){
            const{x:x1,y:y1}=corners[0];//左上
            const{x:x2,y:y2}=corners[1];// 右上
            // 计算 dy 和 dx
            const dy=y2-y1;
            const dx=x2-x1;
            //计算倾角(弧度->角度)
            const angle =Math.atan2(dy,dx)*(180 /Math.PI);
            // 返回角度
            return angle;
        },
        docScroll(){
            let that=this;
            let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;

            if (that.scrollLoaded == false) return;

            if (jHeight <= 1000 && that.hasMore) {
                that.scrollLoaded = false;
                that.handleLoadingMore();
            }
        },
        async queryList() {
            var that = this;

            // const loading = this.$loading({
            //     lock: true,
            //     text: '努力加载中...',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });
            if(that.params.pageNum==1){
                // this.list=this.$bhelper.vlist;
            }
            this.isloading = true;
            api.searchImgs(that.params).then(result=>{

                let old = that.list;

                let datas=result.data.images.list;
                datas.forEach(item => {
                    item.show=false;item.showOther=false;
                    item.collectId=item.collect_id;
                    that.$bhelper.convertImgItem(item,that);
                })

                if(datas.length>0)
                    that.params.last=datas[datas.length-1].id;

                    
                if(that.params.pageNum==1){
                    that.list=datas;
                }else{
                    that.list = [...old, ...datas];
                }

                that.total = result.total;

                if ((result.data && (result.data.length < that.params.pageSize || result.data.length == 0))||datas.length<that.params.pageSize) {
                    that.hasMore = false;
                } else {
                    that.hasMore = true;
                }

                setTimeout(()=>{
                    that.isloading = false;
                },300)
                setTimeout(()=>{
                    that.scrollLoaded = true;
                },1000)
            }).catch(res=>{
                that.list=[];
                that.isloading=false;
                // loading.close();
                that.isDataError=true;
            })
        },
        async handleFollowFolder() {
            let ckPass=this.$bhelper.checkLogin(this);
            if(!ckPass)return;
            let item = this.info;
            if (item.isSubscribe == 0) {
                let res = await api.followFolder({ explorerId: item.id });
                // let res = await api.followFolder(item.id);
                if (res.code == 0) {
                    item.num++;
                    item.isSubscribe = 1;
                    this.$amessage.success('关注+1，灵感不断！');
                }
            } else {
                let res = await api.cancelFollowFolder({ explorerId: item.id });
                // let res = await api.cancelFollowFolder(item.id);
                if (res.code == 0) {
                    item.num--;
                    item.isSubscribe = 0;
                    this.$amessage.success('取关成功');
                }
            }
        },
        handleSearch(){
            this.params.last='';
            this.hasMore=true;
            this.scrollLoaded=false;
            this.params.pageNum=1;
            this.queryList();
        },
        onCancelFav(_cloectIds) {
            let newdatas = [];
            this.list.map(item => {
                if (!_cloectIds.includes(item.collectId)) {
                    newdatas.push(item);
                }
            })
            this.list = newdatas;
        },
        onTransferSucc() {
            this.showEditImg = false;
            this.list.splice(this.inIdx, 1);
        },
        inEditImg(imgItem, idx) {
            this.inIdx = idx;
            this.currentImg = imgItem;
            this.showEditImg = true;
        },
        get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        onImgError(e) {
            e.target.src = require('../../../assets/pro/default_uimg.svg');
        },
        version(time) {
            let date = new Date(time)
            return date.getTime()
        },
        handleBack() {
            if(this.loginUid)
                this.$router.replace({path:localStorage.getItem('FOL-BACK-P')});
            else
                this.$router.replace({path:'/'})
        }
    },
    destroyed() {
        window.removeEventListener('scroll',this.docScroll);
    },
    async mounted() {
        if(localStorage.getItem('token')){
            this.loginUid=localStorage.getItem('userId');
        }
        this.params.explorer_id=this.$route.params.fid;
        let res = await api.getExplorer(this.$route.params.fid);

        
        // if (!res.data.collectList) res.data.collectList = [];
        // let newlist = res.data.collectList.filter(r => {
        //     return r.imageId != null;
        // })
        // let that=this;
        // newlist.map(item => {
        //     if(item.thumbnailBean){
        //         item.width=parseInt(item.thumbnailBean.imageWidth);
        //         item.height=parseInt(item.thumbnailBean.imageHeight);
        //         if (item.thumbnailBean) {
        //             item.thumbnailBean.id = item.imageId;
        //         } else {
        //             item.thumbnailBean = {
        //                 id: item.imageId
        //             };
        //         }
        //     }
        //     item.collect_count=0;
        //     item.praise=0;
        //     item.selected = false;
        //     item.collectId = item.id;
        //     item.id = item.imageId;

        //     let _vtime=null;
        //     if(item.updateTime){
        //         _vtime=item.updateTime;
        //     }else if(item.createTime){
        //         _vtime=item.createTime;
        //     }else if(item.create_time){
        //         _vtime=item.create_time.replace('T',' ');
        //     }
        //     item.thumbnail=item.thumbnailBean.thumbnail;
        //     _vtime=Math.abs(new Date(_vtime).getTime());
        //     item.lazy = {
        //         src:that.$imgdomainurl+item.id+'-'+_vtime+'@1x560.webp',
        //         error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
        //         loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
        //     }
        //     let srcsets=[];
        //     srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@1x560.webp 1x');
        //     srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@2x560.webp 2x');
        //     srcsets.push(that.$imgdomainurl+item.id+'-'+_vtime+'@3x560.webp 3x');
        //     item.srcsets=srcsets.join(',')

        //     if (item.images) {
        //         item.sw = parseInt(item.images.width);
        //         item.sh = parseInt(item.images.height);
        //     } else {
        //         item.sw = parseInt(item.thumbnailBean.imageWidth);
        //         item.sh = parseInt(item.thumbnailBean.imageHeight);
        //     }
        // })
        // res.data.collectList = newlist;
        this.info = res.data;

        // res=await api.getExplorer(this.$route.params.fid);

        this.queryList();

        
        window.addEventListener('scroll',this.docScroll)
    }
}
</script>


<style scoped lang="less">
.img-list-page {
    .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .left {
            width:calc(100% - 110px);
            .back-tit {
                font-size: 18px;
                font-weight: 500;
                display: flex;
                align-items: center;
                width:max-content;
                .tit-text{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-right:10px;
                }
                .back {
                    width: 20px;
                    height: 20px;
                    background: url('../../../assets/pro/icon_next_page_back.svg') no-repeat;
                    background-size:cover;
                    background-position:center center;
                    margin-right:4px;
                    min-width:20px;
                }

                i {
                    font-size: 16px;
                    color: #5D5C5C;
                    font-style: normal;
                    margin-left: 5px;
                    margin-right:10px;
                }
                
                .f-type{
                    line-height: 20px;
                    font-size: 10px;
                    padding: 0px 4px;
                    border-radius: 3px;
                    display: inline-block;
                    position: relative;
                    overflow: hidden;
                    margin-left:5px;
                    color:#725959;
                    min-width: max-content;
                    &:before{
                        content: '';
                        width: 100%;
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        height: 100%;
                    }
                    &.ftp_1 {
                        color: #725959;

                        &:before {
                            background: rgba(228, 36, 82, .14);
                        }
                    }

                    &.ftp_0 {
                        color: #726659;

                        &:before {
                            background: rgba(#E49424, .14);
                        }
                    }

                    &.ftp_2 {
                        color: #4A5A4B;

                        &:before {
                            opacity: 0.14;
                            background: rgba(54, 228, 36, 0.54);
                        }
                    }
                }
            }

            .desc-row {
                font-size: 14px;
                color: #969696;
                margin-top: 16px;
                max-width:75%;
            }
        }

        .fav-btn {
            width: 90px;
            text-align: center;
            border-radius: 8px;
            line-height: 40px;
            font-size: 14px;
            background: #11CCB1;
            transition: .1s all linear;
            // box-shadow: 0px 5px 11px 0px rgba(18, 17, 20, 0.4);

            &:not(.active):hover {
                background: #0fab94;
            }

            &.active {
                background: #29272F;
            }
        }
    }

    .sub-row {
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;

            .img-box {
                width: 24px;
                height: 24px;
                border-radius: 24px;
                overflow: hidden;
            }

            .uname {
                margin-left: 12px;
                font-size: 14px;
                color: #fff;
                font-weight: 600;
                border-right: 1px solid #4B4B4B;
                padding-right: 19px;
                margin-right: 18px;
            }

            .time {
                color: #969696;
                font-size: 12px;
            }
            .follow-num{
                color: #969696;
                margin-left:10px;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .seach-bx {
                width: 215px;
                // margin-right: 15px;
                form{
                    display: flex;
                    align-items: center;
                    background: #29272F;
                    border-radius: 8px;
                }
                input {
                    background: #29272F;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 8px;
                    border: none;
                    padding-left: 36px;
                    color: #fff;
                    font-size: 14px;
                    background-image: url('../../../assets/pro/header/search_icon.svg');
                    background-repeat: no-repeat;
                    background-position: 14px center;
                    background-size: 16px 16px;
                    width: 100%;
                }
                .clear-by-search {
                    min-width: 14px;
                    height: 14px;
                    background: url('../../../assets/pro/cancel_search.svg') no-repeat;
                    background-size: cover;
                    margin-right: 10px;
                    cursor: pointer;
                }
            }
        }
    }


    .mk-rd-datas {
        margin-top: 31px;

        .h-cover-ditem {
            width: 312px;

            .cover-box {
                display: flex;

                .mlft {
                    width: 204px;
                    height: 210px;
                    border-radius: 16px;
                    margin-right: 6px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .mrt {
                    .m-cover-bx {
                        width: 102px;
                        height: 102px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        &:first-child {
                            margin-bottom: 6px;
                        }
                    }
                }
            }

            .u-bx {
                display: flex;
                align-items: center;
                margin-top: 8px;

                .avatar {
                    width: 20px;
                    height: 20px;
                    object-fit: cover;
                    margin-right: 7px;
                    border-radius: 20px;
                }

                .name {
                    font-size: 14px;
                    color: #969696;
                }
            }
        }

        .waf-ligan-item {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            font-size: 1.2em;
            border: 1px solid #111;
            border-radius: 16px;
            transition: .1s all linear;

            &:hover {
                // border:1px solid #11CCB1;
            }

            .m-img {
                border-radius: 16px;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

            .author {
                position: absolute;
                bottom: 10px;
                left: 10px;
                background: rgba(255, 255, 255, 0.9);
                border-radius: 12px;
                padding: 10px 13px;
                transition: 0.1s all linear;
                width: 164px;
                cursor: pointer;

                &:hover {
                    background: rgba(255, 255, 255, 1);
                }

                .ar-tit {
                    font-size: 14px;
                    font-weight: 500;
                    color: #383737;
                    line-height: 20px;
                    margin-bottom: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    background: url('../../../assets/pro/take_tit_icon.svg') no-repeat;
                    background-position: left center;
                    padding-left: 22px;
                }

                .u-box {
                    display: flex;
                    padding-left: 20px;

                    .name {
                        font-size: 14px;
                        color: #969696;
                        font-weight: 500;
                    }

                    .avatar {
                        width: 20px;
                        height: 20px;
                        border-radius: 20px;
                        margin-right: 7px;
                    }
                }
            }

            .fav-btn {
                background-color: #11CCB1;
                color: #fff;
                height: 44px;
                line-height: 44px;
                // width:82px;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 14px;
                border-radius: 12px;
                cursor: pointer;
                background-image: url('../../../assets/pro/un_favicon.svg');
                background-repeat: no-repeat;
                background-position: 11px center;
                padding-left: 35px;
                padding-right: 12px;

                &:hover {
                    background-color: #f34972;
                }
            }

            .faved-btn {
                background-color: #fff;
                color: #000;
                height: 44px;
                line-height: 44px;
                // width:82px;
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 14px;
                border-radius: 12px;
                cursor: pointer;
                background-image: url('../../../assets/pro/faved_icon.svg');
                background-repeat: no-repeat;
                background-position: 11px center;
                padding-left: 35px;
                padding-right: 12px;
                opacity: 0.9;

                &:hover {
                    opacity: 1;
                }
            }

            .select-btn {
                width: 20px;
                height: 20px;
                position: absolute;
                left: 10px;
                top: 10px;
                background: url('../../../assets/pro/mutiple_select_pic.svg') no-repeat;
                background-size: cover;

                &.actived {
                    background: url('../../../assets/pro/mutiple_selected_pic.svg') no-repeat;
                    background-size: cover;
                }
            }

            .xs-img-btn {
                background-image: url('../../../assets/pro/xs_img_cion.svg');
                background-repeat: no-repeat;
                background-position: center center;
                width: 40px;
                height: 40px;
                position: absolute;
                right: 10px;
                bottom: 10px;
                background-color: #fff;
                border-radius: 12px;
                cursor: pointer;
                opacity: 0.9;

                &:hover {
                    opacity: 1;
                }
            }

            .edit-btn {
                color: #383737;
                font-size: 14px;
                background-color: #fff;
                border-radius: 12px;
                line-height: 44px;
                width: 40px;
                height: 40px;
                text-align: center;
                position: absolute;
                right: 10px;
                top: 10px;
                background-image: url('../../../assets/pro/edit_ico.svg');
                background-repeat: no-repeat;
                background-position: center center;
            }

            .hid-el {
                // display: none;
                transition: .1s all linear;
                opacity: 0;
            }

            &:hover {
                .hid-el {
                    // display: inline-block;
                    opacity: 1;
                }
            }
        }
    }
}
</style>